<template>
  <div class="toolDialogContainer" v-if="isToolDialogShow" v-drag>
    <div class="toolDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">管网资产总览</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="toolDialogContent">
      <div
        v-if="isNormalShow"
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
        "
      >
        统计结果
      </div>
      <div v-if="isNormalShow" style="width: 100%; margin-top: 10px">
        <el-table
          id="dataTable"
          :data="tableData"
          border
          height="250"
          style="width: 100%; overflow: auto"
        >
          <el-table-column prop="cnname" label="类别"> </el-table-column>
          <el-table-column prop="equipmentNum" label="总数量(个)/总长度(公里)">
          </el-table-column>
        </el-table>

        <!-- <div class="count-result-title" style="width: 100%; height: 33px; background-color: #fff; display: flex;">
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px;" >类别</div>
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px">总数量(个)</div>
                </div>
                <div class="count-result-content">

                </div> -->
      </div>
      <div
        v-if="isNormalShow"
        class="bottom-button"
        style="margin-top: 0.5rem; display: flex; justify-content: flex-end"
      >
        <el-button size="mini" icon="el-icon-s-data" @click="openStatisicDialog"
          >统计</el-button
        >
        <el-button size="mini" icon="el-icon-folder-opened" @click="exportForm"
          >导出</el-button
        >
      </div>
    </div>
    <el-dialog
      title="管网资产统计图表"
      :modal="false"
      :visible.sync="dialogStatisicVisible"
    >
      <EChartsVue :chart-data="chartData"></EChartsVue>
    </el-dialog>
  </div>
</template>

<script>
import { getEquipStatistics } from "@/api/EquipmentManagement.js";
import * as XLSX from "xlsx";
import * as FileSaver from "file-saver";
import EChartsVue from "../../UtilView/ECharts.vue";
export default {
  name: "EquipInfoShow",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    EChartsVue,
  },
  data() {
    return {
      isDetailDialogShow: false,
      isNormalShow: true,
      isAdvancedShow: false,
      tableData: [],
      dialogStatisicVisible: false,
      chartData: {
        xAxisData: [],
        seriesData: [],
      },
    };
  },
  computed: {
    isToolDialogShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    changeMenu(val) {
      if (val == "normal") {
        this.isNormalShow = true;
        this.isAdvancedShow = false;
      } else {
        this.isNormalShow = false;
        this.isAdvancedShow = true;
      }
    },
    exportForm() {
      if (this.tableData.length === 0) {
        this.$message.warning("暂无可导出的数据!");
        return;
      }
      let tables = document.getElementById("dataTable").cloneNode(true);
      let table_book = XLSX.utils.table_to_book(tables);
      let table_write = XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          `管网资产统计表.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    openStatisicDialog() {
      this.dialogStatisicVisible = true;
    },
  },

  mounted() {
    this.initMap();
    getEquipStatistics().then((res) => {
      this.tableData = res.data.map((item) => {
        return {
          cnname: item.cnname.replace(/\s+/g, ""),
          equipmentNum: item.equipmentNum || item.totalLength,
        };
      });
      this.tableData.push({
        cnname: "管线总长",
        equipmentNum: res.totalLineLength,
      });
      for (let i = 0; i < this.tableData.length; i++) {
        this.chartData.xAxisData.push(
          this.tableData[i].cnname.replace(/\s+/g, "")
        );
        this.chartData.seriesData.push(
          this.tableData[i].equipmentNum || this.tableData[i].totalLength
        );
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.toolDialogContainer {
  width: 25vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -19vw;
  height: 46vh;
  z-index: 2;
  .toolDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .toolDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }
      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }
    .contentBox {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .formRow {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .search_input {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          input {
            width: 80%;
          }
        }
      }
      .formRow1 {
        background-color: #4070a2;
        .search_label {
        }
        .showAllList {
          margin-left: 15vw;
        }
      }
      .formRowPoint {
        display: flex;
        .columnLabel {
          display: flex;
          flex-direction: column;
          .label {
            display: flex;
            font-size: 16px;
            .label_text {
              width: 100px;
              margin-right: 10px;
            }
            .coordinate-input {
              margin-left: 88px;
            }
          }
        }
      }
      .formTable {
        table {
          border-collapse: collapse;
          border: 1px solid white;
          width: 23vw;
          height: 30vh;
          overflow: auto;
          .table-cell {
            height: 5vh;
          }
          .table-row {
            display: table-row;
          }
        }

        table tbody tr {
          border: 1px solid white;
        }

        table td {
          overflow: auto;
          line-height: 5vh;
        }
      }
      .label {
        width: 100px;
        margin-right: 10px;
      }
      .control {
        flex-grow: 1;
        .pickup-btn {
          width: 20%;
          margin-left: 1rem;
        }
        .pickup-btn1 {
          margin-left: 12.3rem;
        }
        .smallBtn {
          width: 4.5rem;
          margin-left: 88px;
        }
        .data-container {
          display: flex;
          justify-content: space-between;
          background-color: #4070a2;
          border-bottom: 1px solid white;
        }
        .data-container:hover {
          background-color: #03366c;
        }
      }

      select,
      textarea,
      button {
        width: 100%;
        color: white !important;
        background-color: #4070a2;
        border: none; /* 去除边框 */
        outline: none; /* 去除焦点时的轮廓线 */
        font-size: 0.8rem;
        height: 1.5rem;
      }

      button {
        margin-right: 10px; /* 按钮之间的间距 */
      }
      button:hover {
        background-color: #4998f2;
      }
      button:focus {
        background-color: #4998f2;
      }
      textarea {
        height: 5rem;
      }

      /* 最后一行的按钮不需要 label，可以单独设置样式 */
      .formRow:last-child {
        justify-content: flex-end;
      }

      .formRow:last-child .button {
        margin-left: 10px; /* 按钮之间的间距，而不是右边距 */
      }
    }
  }
}
</style>
